<template>
  <el-dialog
    :title="plsc.id?$t('message.edit') + $t('message.plsc'):$t('message.plsc')"
    :visible.sync="showPlsc"
    width="700px"
    :close-on-click-modal="modalDialog"
    :close-on-press-escape="modalDialog"
    @close="closePlsc"
  >
    <el-form ref="plscForm" :model="plsc" :rules="rules" label-width="auto" label-suffix="：">
      <el-form-item :label="$t('message.sdcd')" prop="siteModelIds">
        <el-select v-model="plsc.siteModelIds" :placeholder="$t('message.qxz') + $t('message.cd')" multiple style="width: 100%">
          <el-option
            v-for="item in cdList"
            :key="item.id"
            :label="item.siteName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('message.scrq')" prop="date">
        <el-date-picker
          v-model="plsc.date"
          style="width: 100%"
          value-format="yyyy-MM-dd"
          type="daterange"
          :range-separator="$t('message.zhi')"
          :start-placeholder="$t('message.ksrq')"
          :end-placeholder="$t('message.jsrq')"
          :picker-options="pickerOptions"
        />
      </el-form-item>
      <el-form-item :label="$t('message.scsj')" prop="time">
        <el-time-picker
          v-model="plsc.time"
          is-range
          style="width: 100%"
          :range-separator="$t('message.zhi')"
          format="HH:mm"
          value-format="HH:mm"
          :start-placeholder="$t('message.kssj')"
          :end-placeholder="$t('message.jssj')"
          :placeholder="$t('message.xzsjfw')"
        />
      </el-form-item>
      <el-form-item :label="$t('message.sczq')" prop="days">
        <el-checkbox-group v-model="plsc.days">
          <el-checkbox
            v-for="(item, index) in weeksList"
            :key="index"
            :label="item.value"
            :value="item.value"
          >
            {{ item.label }}
          </el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item :label="$t('message.bz')">
        <el-input
          v-model="plsc.remark"
          type="textarea"
          :autosize="{ minRows: 2, maxRows: 10 }"
          :placeholder="$t('message.qsr') + $t('message.bzxx')"
        />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="closePlsc">{{ $t('message.qx') }}</el-button>
      <el-button :loading="loading" type="primary" @click="clickPlsc">{{ $t('message.qr') }}</el-button>
    </div>
  </el-dialog>
</template>
<script>
import {
  getSiteModelListByProAndArea, batchSiteLockStatus, updateBatchSiteLock
} from '@/api'
import store from '@/store'
import { shortcuts } from '@/utils/config'
export default {
  data() {
    return {
      modalDialog: store.getters.dialog,
      pickerOptions: {
        shortcuts,
        disabledDate(time) {
          return (
            time.getTime() < new Date(new Date().toLocaleDateString()).getTime()
          )
        }
      },
      loading: false,
      showPlsc: false, // 批量锁场弹窗
      plsc: { days: [], date: [], time: null }, // 批量锁场
      cdList: [], // 场地列表
      weeksList: [{
        value: '7',
        label: this.$t('message.z7')
      },
      {
        value: '1',
        label: this.$t('message.z1')
      },
      {
        value: '2',
        label: this.$t('message.z2')
      },
      {
        value: '3',
        label: this.$t('message.z3')
      },
      {
        value: '4',
        label: this.$t('message.z4')
      },
      {
        value: '5',
        label: this.$t('message.z5')
      },
      {
        value: '6',
        label: this.$t('message.z6')
      }],
      projectId: '',
      rules: {
        siteModelIds: [
          { required: true, message: this.$t('message.qxz') + this.$t('message.cd'), trigger: 'change' }
        ],
        date: [
          { required: true, message: this.$t('message.qxz') + this.$t('message.scrq'), trigger: 'change' }
        ],
        time: [
          { required: true, message: this.$t('message.qxz') + this.$t('message.scsj'), trigger: 'change' }
        ],
        days: [
          { required: true, message: this.$t('message.qxz') + this.$t('message.sczq'), trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    // 批量锁场
    showPlscBtn(projectId, plsc) {
      this.projectId = projectId
      this.plsc = plsc || { days: [], date: [], time: null }
      getSiteModelListByProAndArea({ param: { venueId: sessionStorage.getItem('venueId'), projectId }}).then(res => {
        if (res.errorCode === '000000') {
          this.showPlsc = true
          this.cdList = res.recordList || []
          this.$nextTick(() => {
            this.$refs.plscForm.clearValidate()
          })
        }
      })
    },
    closePlsc() {
      this.showPlsc = false
    },
    clickPlsc() {
      const that = this
      const param = { ... this.plsc }
      let lockInfo = ''
      const { cdList, weeksList } = this
      this.$refs.plscForm.validate((valid) => {
        if (valid) {
          param.days.sort()
          param.siteModelIds.forEach((s, index) => {
            cdList.forEach(e => {
              if (s === e.id) {
                if (index === (param.siteModelIds.length - 1)) {
                  lockInfo = lockInfo + e.siteName + ' '
                } else {
                  lockInfo = lockInfo + e.siteName + '/'
                }
              }
            })
          })
          param.days.forEach((s, index) => {
            weeksList.forEach(e => {
              if (Number(s) === Number(e.value)) {
                if (index === param.days.length - 1) {
                  lockInfo = lockInfo + e.label + ' '
                } else {
                  lockInfo = lockInfo + e.label + '/'
                }
              }
            })
          })
          lockInfo = lockInfo + param.time[0] + '-' + param.time[1]
          that.loading = true
          if (param.id) {
            updateBatchSiteLock({
              param: {
                days: param.days.join(','),
                endDate: param.date[1],
                endTime: param.time[1],
                id: param.id,
                lockInfo,
                type: '0',
                projectId: that.projectId,
                remark: param.remark,
                siteModelIds: param.siteModelIds,
                startDate: param.date[0],
                startTime: param.time[0]
              }
            }).then(res => {
              that.loading = false
              if (res.errorCode === '000000') {
                that.$message.success(this.$t('message.xgplsccg'))
                that.showPlsc = false
                that.$emit('plscSuccess')
              }
            }).catch(() => {
              that.loading = false
            })
          } else {
            batchSiteLockStatus({
              param: {
                days: param.days.join(','),
                endDate: param.date[1],
                endTime: param.time[1],
                lockInfo,
                type: '0',
                projectId: that.projectId,
                remark: param.remark,
                siteModelIds: param.siteModelIds,
                startDate: param.date[0],
                startTime: param.time[0]
              }
            }).then(res => {
              that.loading = false
              if (res.errorCode === '000000') {
                that.$message.success(this.$t('message.plsccg'))
                that.showPlsc = false
                that.$emit('plscSuccess')
              }
            }).catch(() => {
              that.loading = false
            })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>
